<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子路由</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>
<div id="app">
    <h1>路由导航</h1>


    <router-link to="/nima">nima</router-link>
    <router-link to="/nima/wangba">wangba</router-link>
    <router-link to="/nima/yuan">yuan</router-link>

    <router-view></router-view>
</div>

<script>

    var User = {
        template: ` <div class="user">
                        <h2>User {{ $route.params.userId}}</h2>
                        <router-view></router-view>
                    </div>`
    }

    var home = {template:`<div></div>`}
    var yuan = {template:`<div style="background-color: chocolate;width: 300px;height: 300%;border-radius: 50%"></div>`}
    var wangba = {template:`<div style="background-color: chocolate">wangba</div>`}
    var vueRouter = new VueRouter({
        routes: [
            {path: "/nima/:userId", component: User,
                //子路由
                children:[
                    {path:"",component:home},
                    {path:"wangba",component:wangba},
                    {path:"yuan",component:yuan},
                ]}
        ]
    });


    var v = new Vue({router: vueRouter}).$mount("#app");


</script>

</body>
</html>